<template>
	<div class="car-detial"  v-loading="loading">
		<el-row :gutter="20">
			<el-col :sm="24" :md="12" :lg="12" :xl="12">
				<div>
					<el-carousel :interval="5000" arrow="hover">
						<el-carousel-item v-for="item in res.carImages" :key="item.imageId" style="text-align:center;line-height:300px;">
							<img :src="imgUrl+item.imageUrl +'.r_590xh_300'" onerror="javascript:this.src='static/images/default.svg'" class="car-img">
						</el-carousel-item>
						<el-carousel-item v-if="res.carImages.length == 0" style="text-align:center;line-height:300px;background:#EAEAEA">
							<img :src="'static/images/default.svg'"  class="car-img">
						</el-carousel-item>
					</el-carousel>
				</div>
			</el-col>
			<el-col  :sm="24" :md="12" :lg="12" :xl="12">
				<div class="car-title">
					<span>{{res.carTitle}}</span>
				</div>
				<p class="car-price">
					<b>零售价：</b><span v-if="res.carRetailPrice && res.carRetailPrice != 0">￥<b style="font-size:32px">{{res.carRetailPrice || '--'}}</b>万元</span><span v-else="res.carRetailPrice && res.carRetailPrice != 0"><b style="font-size:32px">价格面议</b></span>
					<span class="car-state-detial-box">
						<span v-if="res.carBargainPriceState" class="car-state-detial color1">特卖中</span>
			  		<span v-if="res.carAuthState == 10" class="car-state-detial color2">启辕认证</span>
			  		<span v-if="res.carPledgeState == 310" class="car-state-detial color3">抵押中</span>
			  		<span v-if="res.carOrderState==1" class="car-state-detial color4">已预定</span>
					</span>
				</p>
				<table class="top-info">
					<tr>
						<td class="top-info-title">所属车商：</td>
						<td>{{res.shop.shopName || '--'}}</td>
						<td class="top-info-title">车 架 号：</td>
						<td>{{res.carVin || '--'}}</td>
					</tr>
					<tr>
						<td class="top-info-title">变 速 箱：</td>
						<td>{{res.carGearbox || '--'}}</td>
						<td class="top-info-title">排　　量：</td>
						<td>{{res.carDisplacement || '-'}}{{res.carInletModel || '-'}}</td>
					</tr>
					<tr>
						<td class="top-info-title">行驶里程：</td>
						<td>{{res.carMileage || '--'}}万公里</td>
						<td class="top-info-title">外观颜色：</td>
						<td>{{res.carOutColor || '--'}}</td>
					</tr>
					<tr>
						<td class="top-info-title">首次上牌：</td>
						<td >
							<span v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterChDateForMonth}}</span>
							<span v-if="res.carLicenceState == 2">未上牌</span>
							<span v-if="res.carLicenceState == 3">新车</span>
						</td>
						<td class="top-info-title">年审日期：</td>
						<td>{{res.carValidateDate | filterChDateForMonth}}</td>
					</tr>
				</table>
			</el-col>
		</el-row>
		<div class="car-info-panel">
			<div class="car-info-title">收购信息</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="24" :lg="24" :xl="24" >
					<el-form-item label="品　　牌：">
						<div>{{ res.brand.brandName}} {{ res.series.seriesName}} {{ res.model.modelName}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="所属市场：">{{ res.market.marketName || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="所属分店：">
						<div>{{ res.shop.shopName || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="所属区域：">
						<div >{{ res.region.regionName || '--'}}</div>
					</el-form-item>
				</el-col>

				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="钥匙数量：">
						<div >{{ res.carKeyNum || '--'}}把</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="表显里程：">
						<div >{{ res.carMileage || '--'}}万公里</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="首次上牌：">
						<div v-if="res.carLicenceState == 1">{{res.carLicenceDate | filterChDateForMonth}}</div>
						<div v-if="res.carLicenceState == 2">未上牌</div>
						<div v-if="res.carLicenceState == 3">新车</div>
					</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">基本信息</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="24" :lg="24" :xl="24" >
					<el-form-item label="宣传标题：">{{ res.carTitle || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车 架 号：">
						<div>{{ res.carVin || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车　　型：">
						<div >{{ res.carType.carTypeName || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车 门 数：">
						<div>{{ res.carDoorNum || '--'}}个</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="排　　量：">
						<div >{{res.carDisplacement}}{{res.carInletModel}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="燃料类型：">
						<div >{{ res.carFuel || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="变 速 箱：">
						<div>{{res.carGearbox || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="排放标准：">
						<div>{{res.carEnviron || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="外观颜色：">
						<div>{{res.carOutColor || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="内饰颜色：">
						<div>{{res.carInColor || '--'}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="年审到期：">
						<div>{{res.carValidateDate | filterChDateForMonth}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="交强险到期日：">
						<div>{{res.carForceInsuranceDate | filterChDateForMonth}}</div>
					</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="商业险到期日：">
						<div>{{res.carBusinessInsuranceDate | filterChDateForMonth}}</div>
					</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">车辆描述</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="24" :lg="16" :xl="12" >
					<el-form-item label="瑕疵描述：">{{ res.carFlawDesc || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="24" :lg="16" :xl="12" >
					<el-form-item label="按揭说明：">{{ res.carMortgageDesc || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="24" :lg="16" :xl="12" >
					<el-form-item label="卖点描述：">{{ res.carSellingPointDesc || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="24" :lg="16" :xl="12" >
					<el-form-item label="4S店定期保养：">{{ res.car4sUpkeepState == 1 ? '是' : '否'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">基本参数</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="厂　　商：">{{ res.model.modelManufacturer || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="级　　别：">{{ res.carType.carTypeName || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="发 动 机：">{{ res.model.modelEngineModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="变 速 箱：">{{ res.model.modelGearbox || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车身结构：">{{ res.model.modelBodywork || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">车身</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="长　　度：">{{ res.model.modelLength || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="宽　　度：">{{ res.model.modelWidth || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="高　　度：">{{ res.model.modelHeight || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="轴　　距：">{{ res.model.modelWheelbase || '--'}}mm</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="车身结构：">{{ res.model.modelBody || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">发动机</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="发动机型号：">{{ res.model.modelEngineModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="排　　量：">{{ res.model.modelDisplacement || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="进气形式：">{{ res.model.modelInletModel || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="气缸排列形式：">{{ res.model.modelCylinderArray || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="气 缸 数：">{{ res.model.modelCylinderNum || '--'}}个</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="燃料形式：">{{ res.model.modelFuelRoz || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="环保标准：">{{ res.model.modelEnviron || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel">
			<div class="car-info-title">变速箱</div>
			<el-form :inline="true"  label-width="120px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="变速箱类型：">{{ res.model.modelGearbox || '--'}}</el-form-item>
				</el-col>
				<el-col :sm="24" :md="12" :lg="8" :xl="6" >
					<el-form-item label="挡位个数：">{{ res.model.modelGearNum || '--'}}</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="car-info-panel" v-for="item in conf" >
			<div class="car-info-title">{{item.confName}}</div>
			<el-form :inline="true"  label-width="150px" class="clearfix">
				<el-col :sm="24" :md="12" :lg="8" :xl="6" v-for="ite in item.childCarConf" :key="ite.confId">
					<el-form-item :label="ite.confName+'：'">
						<span :style="ite.selectedState?'color:#67c23a;font-size:20px;display:block':''">{{ite.selectedState?'✓':'--'}}</span>
					</el-form-item>
				</el-col>
			</el-form>
		</div>
		<div class="footer">
	      <el-button size="small" type="primary" @click.native="turnToCarList">返回列表</el-button>
	    </div>
	</div>
</template>

<script>
import '../../assets/css/carDetial.css'
  export default {
    data() {
      return {
      	loading:true,
        res:{
        	brand:{},
        	series:{},
        	model:{},
        	shop:{},
        	market:{},
        	region:{},
        	carType:{},
        	model:{},
        	carImages:[],
        },
        imgUrl:imageUrl,
        conf:[],
       }
    },
    methods:{
    	getCarDetial(){
    		this.$axios.get(this.$api.getCarById,{params: {'carId': this.$route.params.id,'imageViewId':2}})
    		.then((res)=>{
    			this.res = res.data.result;
    			this.loading = false;
    		})
    		this.$axios.get(this.$api.getCarConfById,{params: {'carId': this.$route.params.id}})
    		.then((res)=>{
    			this.conf = res.data.result
    		})
    	},
    	turnToCarList(){
			this.$router.push('/car');
		},
    },
    activated() {
    	this.loading = true;
    	this.getCarDetial();
	},
	deactivated() {

	}

  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
	.el-form-item{margin-bottom: 0;}
	.el-carousel__button { width: 6px !important;}
</style>


















